<template>
  <div>
    <!-- 图标面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区域 -->
    <el-card>
      <!-- 添加按钮 -->
      <el-button type="primary" @click="showAddDialogVisible()">添加分类</el-button>
      <!-- 角色列表数据 -->
      <tree-table :data="categoryList" :columns="columnsConfig"
                  :selection-type="false" :expand-type="false"
                  show-index index-text='#' border>
          <!-- 是否有效 -->
          <template slot="isok" slot-scope="scope">
              <i class="el-icon-success el-success" v-if="!scope.row.cat_deleted"></i>
              <i class="el-icon-error el-danger" v-else></i>
          </template>
          <!-- 排序 -->
          <template slot="order" slot-scope="scope">
              <el-tag size="mini" type="primary" v-if="scope.row.cat_level === 0">一级</el-tag>
              <el-tag size="mini" type="success" v-if="scope.row.cat_level === 1">二级</el-tag>
              <el-tag size="mini" type="warning" v-if="scope.row.cat_level === 2">三级</el-tag>
          </template>
          <!-- 操作 -->
          <template slot="opt">
              <el-button size="mini" type="primary" icon="el-icon-edit">编辑</el-button>
              <el-button size="mini" type="danger" icon="el-icon-delete">删除</el-button>
          </template>
      </tree-table>
    </el-card>

    <!-- 添加对话框 -->
    <el-dialog title="添加分类" :visible.sync="addDialogVisible" width="50%" @close="addDialogClose">
      <!-- 内容主体 -->
      <el-form ref="addRef" :model="addForm" :rules="addRules" label-width="70px" class="add-form">
          <el-form-item label="分类名称" prop="cat_name" label-width="80px">
              <el-input v-model="addForm.cat_name"></el-input>
          </el-form-item>
          <el-form-item label="父级分类" label-width="80px">
              <!-- <el-input v-model="addForm.cat_level"></el-input> -->
              <el-cascader
                v-model="selectedKeys"
                :options="parentCateList"
                :props="cascaderProps"
                clearable
                :change-on-select="true"
                @change="parentCascaderChanged"></el-cascader>
            </el-form-item>
      </el-form>
       <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCategory">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 修改对话框 -->
    <el-dialog title="修改分类" :visible.sync="editDialogVisible" width="50%" @close="editDialogClose">
      <!-- 内容主体 -->
      <el-form ref="editRef" :model="editForm" :rules="editRules" label-width="70px" class="editform">
          <el-form-item label="角色名称" prop="roleName">
              <el-input v-model="editForm.roleName"></el-input>
          </el-form-item>
          <el-form-item label="角色描述" prop="roleDesc">
              <el-input v-model="editForm.roleDesc"></el-input>
          </el-form-item>
      </el-form>
       <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editRole">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      categoryList: [], // 商品分类的数据列表
      queryInfo: { // 查询参数
        type: 3,
        pagenum: 1,
        pagesize: 5
      },

      columnsConfig: [
        {
          label: '分类名称',
          prop: 'cat_name'
        },
        {
          label: '是否有效',
          prop: 'cat_deleted',
          type: 'template', // 自定义模板类型
          template: 'isok' // 自定义模板名称
        },
        {
          label: '排序',
          prop: 'cat_level',
          type: 'template', // 自定义模板类型
          template: 'order' // 自定义模板名称
        },
        {
          label: '操作',
          type: 'template', // 自定义模板类型
          template: 'opt' // 自定义模板名称
        }
      ], // 为table指定列的定义

      addDialogVisible: false, // 是否显示添加对话框
      editDialogVisible: false, // 是否显示编辑对话框

      addForm: {
        cat_name: '', // 分类名称
        cat_pid: 0, // 父级分类的id
        cat_level: 0 // 分类等级，一级0, 二级1, 三级2，默认是1级分类
      }, // 添加分类操作对象
      editForm: {}, // 编辑权限操作对象

      // 添加表单的验证规则对象
      addRules: {
        cat_name: [
          { required: true, message: '请输入分类名称', trigger: 'blur' }
        ]
      },
      // 编辑表单的验证规则对象
      editRules: {
        username: [
          { required: true, message: '请输入角色名称', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入角色描述', trigger: 'blur' },
          { min: 6, max: 100, message: '长度在 6 到 100 个字符', trigger: 'blur' }
        ]
      },
      // 父级分类列表
      parentCateList: [],
      // 指定添加分类的级联选择器的配置对象
      cascaderProps: {
        expandTrigger: 'hover',
        value: 'cat_id',
        label: 'cat_name',
        children: 'children'
      },
      // 选中的父级分类的id数组
      selectedKeys: []
    }
  },
  created () {
    this.getCategoryList()
  },
  methods: {
    async getCategoryList () {
      // 获取分类信息列表
      const { data: res } = await this.$http.get('categories', { params: this.queryInfo })
        .catch(err => ({ data: { status: 500, message: err } }))
      console.log(res)
      if (res.status !== 200) return this.$message.error('获取商品分类列表失败！')
      this.$message.success('获取商品分类列表成功！')
      this.categoryList = res.objects
      this.total = res.meta.total
    },
    addDialogClose () {
      // 添加话框的关闭后清空表单
      this.$refs.addRef.resetFields()
      this.selectedKeys = []
      this.addForm.cat_pid = 0
      this.addForm.cat_level = 0
    },
    addCategory () {
      // 添加新分类
      // console.log(this.addForm)
      this.$refs.addRef.validate(async valid => {
        if (!valid) return
        const { data: res } = await this.$http.post('categories', this.addForm)
          .catch(err => ({ data: { status: 500, message: err } }))
        console.log(res)
        if (res.status !== 201) return this.$message.error('添加分类失败')
        this.$message.success('添加分类成功')
        // 隐藏添加分类对话框
        this.addDialogVisible = false
        // 重新获取分类信息列表
        this.getCategoryList()
      })
    },
    showEditDialog (info) {
      // 打开修改对话框
      this.editDialogVisible = true
      this.editForm = info
    },
    editRole () {

    },
    editDialogClose () {
      // 编辑对话框的关闭后清空表单
      this.$refs.editRef.resetFields()
    },
    async showAddDialogVisible () {
      // 展示添加分类对话框
      await this.getParentCateList()
      this.addDialogVisible = true
    },
    async getParentCateList () {
      // 获取父级分类的数据列表
      const { data: res } = await this.$http.get('categories', { params: { type: 2 } })
        .catch(err => ({ data: { status: 500, message: err } }))
      console.log(res)
      if (res.status !== 200) return this.$message.error('获取父级分类数据失败！')
      // this.$message.success('获取父级分类数据成功！')
      this.parentCateList = res.objects
    },
    parentCascaderChanged () {
      // 父级分类选择项发生变化时触发该函数
      // console.log(this.selectedKeys)
      if (this.selectedKeys.length) {
        this.addForm.cat_pid = this.selectedKeys.slice(-1)[0]
        this.addForm.cat_level = this.selectedKeys.length
      } else {
        this.addForm.cat_pid = 0
        this.addForm.cat_level = 0
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .zk-table{
    margin-top: 15px;
  }

  .el-cascader{
    width: 100%;
  }
</style>
